<template>
  <div class="home-container">
    <a-spin :spinning="loading">
      <div class="overview-cards">
        <div class="card-item" @click="handleToContributionMgr()">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/1.png" alt="总投稿" />
            </div>
            <div class="info">
              <div class="label">总投稿</div>
              <div class="value">{{ overview.total_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="handleToContributionMgr(1)">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/2.png" alt="已审核" />
            </div>
            <div class="info">
              <div class="label">已审核</div>
              <div class="value success">{{ overview.approved_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="handleToContributionMgr(0)">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/3.png" alt="待审核" />
            </div>
            <div class="info">
              <div class="label">待审核</div>
              <div class="value warning">{{ overview.pending_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="handleToContributionMgr(2)">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/4.png" alt="未采用" />
            </div>
            <div class="info">
              <div class="label">未采用</div>
              <div class="value danger">{{ overview.rejected_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="handleToContributionMgr(3)">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/5.png" alt="待打分" />
            </div>
            <div class="info">
              <div class="label">待打分</div>
              <div class="value primary">{{ overview.unscored_count || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { apiContributionGetOverview } from '@/api/featch'

export default {
  name: 'home',
  data() {
    return {
      loading: false,
      overview: {}
    }
  },
  mounted() {
    this.fetchOverview()
  },
  methods: {
    async fetchOverview() {
      this.loading = true
      try {
        const res = await apiContributionGetOverview()
        if (res.code === 200) {
          this.overview = res.data
        } else {
          this.$message.error(res.message || '获取概览数据失败')
        }
      } catch (error) {
        console.error('获取概览数据失败:', error)
        this.$message.error('获取概览数据失败')
      } finally {
        this.loading = false
      }
    },
    handleToContributionMgr(approved_status) {
      this.$router.push({
        name: 'contribution-list',
        params: {
          approved_status
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 24px;

  .overview-cards {
    display: flex;
    justify-content: space-between;
    margin: -12px;

    .card-item {
      flex: 1;
      padding: 12px;
      cursor: pointer;

      .card-content {
        background: #fff;
        padding: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        min-height: 160px;

        &:hover {
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
          transform: translateY(-2px);
        }

        .icon {
          width: 80px;
          height: 80px;
          margin-right: 24px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 64px;
            height: 64px;
          }
        }

        .info {
          flex: 1;

          .label {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 8px;
          }

          .value {
            font-size: 32px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);

            &.success {
              color: #52c41a;
            }

            &.warning {
              color: #faad14;
            }

            &.danger {
              color: #ff4d4f;
            }

            &.primary {
              color: #1890ff;
            }
          }
        }
      }
    }
  }
}
</style>